import React from 'react'
import { Menu, Badge } from 'antd'
import { Link } from 'react-router-dom'
import style from './style.module.scss'

type RaceDetailPageNavProps = {
    matchUrl: string;
    unReadAnnounceNum: number;
    isSigned: boolean;
}

export const RaceDetailPageNav: React.FC<RaceDetailPageNavProps> = (props: RaceDetailPageNavProps) => {
    return (
        <div className={style.navItemBox}>
            <Menu mode="horizontal">
                <Menu.Item>
                    <Link to={`${props.matchUrl}`}>
                        竞赛信息
                    </Link>
                </Menu.Item>
                <Menu.Item>
                    <Link to={`${props.matchUrl}/announce`}>
                        <Badge count={props.unReadAnnounceNum} offset={[18, -3]} overflowCount={9} showZero={false}>
                            公告
                        </Badge>
                    </Link>
                </Menu.Item>
                <Menu.Item>
                    <Link to={`${props.matchUrl}/social`}>
                        讨论
                    </Link>
                </Menu.Item>
            </Menu>
        </div>
    )
}
